import { StyleSheet, Image, Platform, View, Pressable, ScrollView } from 'react-native';
import { Link, useRouter } from 'expo-router';
import { Icon, Input, IconElement, Avatar, Card, TopNavigation, Button, TopNavigationAction, Text, Calendar, Layout, I18nConfig, NativeDateService } from '@ui-kitten/components';



export default function PersonalScreen() {
  const router = useRouter()
  const listMap = [
    {
      text: '性格优势',
      handler() {
        router.push('/personalityAdvantage')
      }
    }, {
      text: '价值观',
    }, {
      text: 'boundary/边界',
    }, {
      text: 'needs/需求',
    }, {
      text: '信息处理模式',
    }, {
      text: '综合测试',
    }, {
      text: '联系我们',
      text2: '客服电话:1986895655'
    }
  ]
  const handleClickListItem = (item: any) => {
    item?.handler?.()
  }
  return (<ScrollView>
    <TopNavigation alignment='center' title="个人" />
    <View style={{ padding: 10 }}>
      <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
        <Avatar shape='round'
          style={{ width: 66, height: 66, marginRight: 10 }}
          source={require('../../assets/images/avatar.png')}></Avatar>
        <View style={{ flex: 1, display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
          <View style={{ flex: 1 }}>
            <Text style={{ fontSize: 16, marginBottom: 10 }}>姓名</Text>
            <Text style={{ fontSize: 12 }}>手机号:98658987545</Text>
          </View>
          <Pressable onPress={() => router.push('/editInfo')} style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
            <Text>个人资料</Text>
            <Icon
              style={{ width: 30, height: 30 }}
              fill='#8F9BB3'
              name='chevron-right'
            />
          </Pressable>
        </View>

      </View>

      <Layout style={{ marginTop: 10, borderRadius: 10, paddingVertical: 10, paddingHorizontal: 15 }}>
        <Pressable onPress={ () => router.push('/stateAnalysis')} style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
          <Text style={{ fontSize: 18, color: '#3D3D3D' }}>
            近期状态分析
          </Text>
          <Icon
            style={{ width: 30, height: 30 }}
            fill='#8F9BB3'
            name='chevron-right'
          />
        </Pressable>
        <Text style={{ color: '#3D3D3D', fontSize: 16, marginTop: 10, fontWeight: 700, marginBottom: 5 }}>自我满意度：88%</Text>
      </Layout>
      <Layout style={{ marginTop: 10, borderRadius: 10, paddingVertical: 10, paddingHorizontal: 15 }}>
        <Text style={{ fontSize: 18, color: '#3D3D3D' }}>
          个人
        </Text>
        {
          listMap.map((item, index) => <View key={index}>
            <Pressable onPress={ () => handleClickListItem(item)} key={index} style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 }}>
              <Layout key={index} style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
                <Avatar shape='square'
                  style={{ width: 16, height: 16, marginRight: 10 }}
                  source={require('../../assets/images/avatar.png')}></Avatar>
                <Text style={{ color: '#666666' }}>{item.text}</Text>
              </Layout>
              {
                item.text2 ? <Text style={{ color: '#666666' }}>{item.text2}</Text> : <Icon
                  style={{ width: 30, height: 30 }}
                  fill='#8F9BB3'
                  name='chevron-right'
                />
              }

            </Pressable>
            <View style={{ borderBottomWidth: 1, borderColor: '#EEEEEE', borderStyle: 'solid', marginVertical: 10 }}></View>
          </View>)
        }


        <Layout key={'-11'} style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginVertical: 10 }}>
          <Layout style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
            <Avatar shape='square'
              style={{ width: 16, height: 16, marginRight: 10 }}
              source={require('../../assets/images/avatar.png')}></Avatar>
            <Text style={{ color: '#666666' }}>退出登录</Text>
          </Layout>
        </Layout>

      </Layout>
    </View>

  </ScrollView>
  );
}

const styles = StyleSheet.create({
  headerImage: {
    color: '#808080',
    bottom: -90,
    left: -35,
    position: 'absolute',
  },
  titleContainer: {
    flexDirection: 'row',
    gap: 8,
  },
});
